<template>
	<div class="pay-day abs full">
		<div class="rel full overflow-x-hidden">
			<div class="pay-day-header">
				购买日包
			</div>
			<div class="pay-day-content">
				<p class="pay-item-h">请选择:</p>
				<ul>
					<li v-for="(item, index) in costList" class="pay-item rel" :class="ind==index?'active':''" @click="addActiveClass(index)">
						<span v-text="item.typeName"></span>
						<span v-text="item.reportTimes"></span>
						<span>个报告&nbsp;</span>
						<span v-text="item.membershipCost"></span>
						<span>元</span>
					</li>
				</ul>
				<h3>以上均赠送同等数量的综合评价查阅权！</h3>
				<h2>支付金额：<span v-text="selectedCost.membershipCost"></span>元</h2>
				<button class="pay-month-button" @click="weixinPay()">现在支付</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'pay-day',
	data() {
		return {
			costList:[],
			selectedCost:{},
			ind: 0
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.payDay = this;
		this.getCostList();
	},
	activated() {
		document.title = '支付';
	},
	deactivated() {

	},
	methods: {
		// 点选的行高亮
		addActiveClass (index) {
			this.ind = index
			this.selectedCost=this.costList[index];
		},
		// 获取会员价格信息列表
		getCostList(){
			let that=this;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={
				customerId,
				membershipCostType:'day'
			}
			this.$util.ajax('/membership/costs/list','post',json).then(function(res){
				if(res.code=='100000'){
					that.costList=res.data;
					that.ind=0;
					that.selectedCost=that.costList[0];
				}
			})
		},
		// 微信支付
		weixinPay(){
			let that=this;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={
				customerId,
				membershipId: that.selectedCost.membershipId,
				membershipCostCode: that.selectedCost.membershipCostCode
			};
			this.$util.ajax('/wechat/order/create','post',json,'filter').then(function(res){
				if(res.code=='100000'){
					let json2=res.data;
					window.WeixinJSBridge && WeixinJSBridge.invoke(
						'getBrandWCPayRequest',
						json2,
						function(res){
							if(res.err_msg == "get_brand_wcpay_request:ok") {
								that.$router.replace('/pay-history');
							} else if(res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg == "get_brand_wcpay_request:cancel"){
								window.ui && window.ui.showToast('支付未完成','');
								// alert(JSON.stringify(res));
							}
						}
					);
				} else if(res.code=='200005'){
					that.hideToast();
					that.showAlert('请先绑定手机号再购买会员',
						function(){
							that.$router.push('/bind-mobile')
						},
						function(){},
						'去绑定'
					);
				}
			})
		}
	}
}
</script>

<style scoped>
.pay-day {
	background-color: #fff;
}
.pay-day-header{
	color: #fff;
	font-size: 0.36rem;
	text-align: center;
	line-height: 1.6rem;
	width: 100%;
	height: 1.6rem;
	margin-top: -0.05rem;
	overflow: hidden;
	background: url("./image/bg.png");
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
.pay-day-content .pay-item-h{
	font-size: 0.36rem;
	color: #333333;
	padding-left: 0.3rem;
	margin: 0;
	height: 1.01rem;
	line-height: 1.01rem;
	width: 100%;
}
.pay-day-content ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.pay-day-content li{
	color: #333333;
	padding-left: 0.3rem;
	font-size: 0;
}
.pay-day-content li span {
	font-size: 0.3rem;
}
.pay-day-content .active{
	background-color:rgba(85, 154, 240, .15);
}
.pay-day-content .pay-item{
	height: 1.09rem;
	line-height: 1.09rem;
}
.pay-day-content .pay-item span{
	color: #3084fc;
}
.pay-day-content .pay-item:after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0.38rem;
	height: 0.38rem;
	border-radius: 50%;
	border: 0.02rem solid #3084fd;
	top: 0.35rem;
	right: 0.3rem;
}
.pay-day-content .active:before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0.26rem;
	height: 0.26rem;
	background-color: #3084fd;
	border-radius: 50%;
	top: 0.43rem;
	right: 0.38rem;
}
.pay-day-content .pay-item .fresh{
	background-color: #f3a93d;
	width: 0.92rem;
	height: 0.36rem;
	line-height: 0.36rem;
	font-size: 0.24rem;
	border-radius: 0.1rem;
	color: #fff;
	margin-left: 0.3rem;
	padding: 0 0.12rem;
}
.pay-day-content h3{
	margin: 0;
	padding-left: 0.3rem;
	font-size: 0.24rem;
	font-weight: normal;
	color: #666;
	line-height: 0.7rem;
	background-color: rgba(240, 238, 244, .6);
}
.pay-day-content h2{
	font-size: 0.34rem;
	color: #076cf7;
	font-weight: normal;
	line-height: 0.7rem;
	text-align: center;
	margin-top: 0.4rem;
	background-color: rgba(240, 238, 244, .6);
}
.pay-day-content button{
	display: block;
	width: 6.23rem;
	height: 0.86rem;
	font-size: 0.3rem;
	margin: 0.6rem auto;
	color: #fff;
	background-color: #4a96fd;
	border: none;
	border-radius: 0.1rem;
}

</style>
